.button,
.button-box {
  position: relative;
  appearance: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--mp-spacing-4);
  cursor: pointer;
  font-weight: 500;
  border-radius: var(--mp-border-radius-default);
  line-height: var(--mp-size-20);
  transition: var(--mp-transition-all);
  background: transparent no-repeat;
  border: none;
  text-decoration: none;
  box-shadow: none;
  text-transform: uppercase;
  font-family: var(--mp-text-font-family);
  user-select: none;
  white-space: nowrap;
}

.button:focus {
  outline: var(--theme-outline-focus);
  outline-offset: var(--mp-outline-offset);
}

.button-box {
  z-index: 1;
  pointer-events: none;
}

.button:disabled {
  opacity: 0.2;
  pointer-events: none;
}

@keyframes is-busy-animation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.button-is-busy {
  animation: is-busy-animation 1s linear infinite normal;
}

/* STYLES */
/* Brand */
.button-style-brand {
  background: var(--theme-color-brand);
  color: var(--theme-on-brand);
}

/* Secondary */
.button-style-secondary {
  color: var(--theme-on-bg-1);
  border: var(--theme-border-color);
  background: var(--button-style-secondary-background);
}

/* Text */
.button-style-text {
  color: var(--theme-on-bg-1);
}

/* Danger */
.button-style-danger {
  background: var(--button-style-secondary-background);
  color: var(--theme-color-danger);
  border: var(--theme-border-color);
}

/* SIZES */

.button-size-medium {
  font-size: var(--mp-size-14);
  padding: var(--mp-spacing-8) var(--mp-spacing-16);
  min-height: var(--mp-size-36);
}

.button-size-medium > *,
.button-size-medium.icon-only > * {
  line-height: var(--mp-size-20);
}

.button-size-medium.icon-only {
  padding: var(--mp-spacing-8);
}

.button-size-medium.icon-only > :first-child {
  font-size: var(--mp-size-20);
}

.button-size-small {
  font-size: var(--mp-size-12);
  padding: var(--mp-spacing-6) var(--mp-spacing-12);
  min-height: var(--mp-size-28);
}

.button-size-small > *,
.button-size-small.icon-only > * {
  line-height: var(--mp-size-16);
}

.button-size-small.icon-only {
  padding: var(--mp-spacing-6);
}

.button-size-small.icon-only > :first-child {
  font-size: var(--mp-size-16);
}

.button-size-exsmall {
  font-size: var(--mp-size-12);
  padding: var(--mp-spacing-4) var(--mp-spacing-8);
  min-height: var(--mp-size-20);
}

.button-size-exsmall > *,
.button-size-exsmall.icon-only > * {
  line-height: var(--mp-size-16);
}

.button-size-exsmall.icon-only > :first-child {
  font-size: var(--mp-size-16);
}

.button-size-exsmall.icon-only {
  padding: var(--mp-spacing-4);
}
